<template>
  <div class="search-goods">
    <Heads types="search"></Heads>

    <!-- 搜索框 -->
    <Search-input @search-change="searchGoods"
      @search-click="searchGoods"></Search-input>

    <!-- 显示区域 -->
    <div class="content">
      <div v-if="searchList.length>0">
        <div v-for="item in searchList" :key="'search'+value+item.goods_id">
          <router-link :to="{name: 'Classify-details-tradeItemId',params: { 'tradeItemId': item.goods_id }}">
            <van-card
              style="text-align: left;"
              :thumb="item.goods_info.picture"
              :price="item.goods_info.price | decimalPoint"
              origin-price="999.00">
              <div slot="title" class="van-ellipsis" style="font-size: .32rem;color:#000;padding: .1rem 0;">
                {{item.goods_info.title}}
              </div>
              <div slot="desc">
                <p>颜色: {{item.sku.tree[0].v[0].name}} | {{item.sku.tree[0].v[1].name}}</p>
                <p>尺寸: {{item.sku.tree[1].v[0].name}} | {{item.sku.tree[1].v[1].name}}</p>
              </div>
            </van-card>
          </router-link>
        </div>
      </div>
      <div v-else :style="{
        height: '.6rem','background-color': '#ddd',color: '#bdc0c5','font-size': '.3rem','text-align': 'center',margin: '.2rem 0','line-height': '.6rem','box-sizing': 'border-box'
        }" class="no-more">- 暂无符合要求的商品,快去搜索吧 -</div>
    </div>
  </div>
</template>

<script>
// import http from 'axios'
import { mapState, mapMutations } from 'vuex'
import Vue from 'vue'
import { NavBar, Icon, Card } from 'vant'
Vue.use(NavBar).use(Icon).use(Card)

export default {
  data () {
    return {
      value: ''
    }
  },
  computed: {
    ...mapState('goodsModule', ['goodsList']),
    searchList: {
      get: function () {
        if (this.value) {
          return this.goodsList.filter(item => {
            return item.goods_info.title.includes(this.value)
          })
        } else {
          return []
        }
      },
      set: function () {
      }
    }
  },
  methods: {
    ...mapMutations('footerModule', ['FOOTERSHOW']),
    searchGoods (val) {
      this.value = val
    }
  },
  mounted () {
    this.FOOTERSHOW(false)
  },
  destroyed () {
    this.FOOTERSHOW(true)
  }
}
</script>

<style lang="scss" scoped>
.search-goods{
  .content{
    margin: .4rem .2rem;
    height: 10.5rem;
    overflow-y: auto;
  }
}
</style>
